<script setup>
import { useDormitoryStore } from '@/store/super-manger/dormitory'
import { storeToRefs } from 'pinia';
import { reactive } from 'vue';
import { addDorLeaderApi } from '@/service/dormitory'
import { showElMessage } from '@/utils/showTipMessage'

const dormitoryStore = useDormitoryStore();
const { isDialogVisible, allNumbers, build, roomName } = storeToRefs(dormitoryStore);

const form = reactive({
    dormitory_leader: ''
})

// 操作按钮
const operatePanel = (value) => {
    if (value) {    // 表示确定
        // 发送网络请求修改寝室长
        handleRequest();
    }
    isDialogVisible.value = false;
}
async function handleRequest() {
    const res = await addDorLeaderApi(build.value, roomName.value, form.dormitory_leader);
    const { code } = res.data;
    if (code) {
        showElMessage('宿舍楼添加成功！');
    }
} 
</script>

<template>
  <div class="dormitory_leader">
    <el-dialog
        v-model="isDialogVisible"
        title="设置【寝室长】"
        width="15%"
        :show-close="false"
        :close-on-click-modal="false"
    >
        <!-- 表单 -->
        <el-form 
            :model="form"
            ref="ruleFormRef"
        >
            <el-form-item prop="dormitory_leader">
                <el-select 
                    v-model="form.dormitory_leader" 
                    placeholder="选择宿舍成员"
                >
                    <template v-for="item of allNumbers" :key="item.id">
                        <el-option :label="item.name" :value="item.sno" />
                    </template>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="operatePanel(0)">取消</el-button>
                <el-button 
                    type="primary" 
                    @click="operatePanel(1)"
                    :disabled="!form.dormitory_leader"
                >
                确定
                </el-button>
            </span>
        </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.el-form-item {
    margin: 20px 0;
}
</style>